<template>
  <div class="login-wrapper">
    <div class="header">
      <img src="https://web.czb365.com/ty/czb-mosi-wms-web/logo.png" alt="">
    </div>
    <div class="container">
      <div class="login-box">
        <div class="login-box-left"></div>
        <div class="login-box-right">
          <h2 class="title">登录</h2>
          <el-form :model="params" ref="form" :rules="formRules">
            <el-form-item prop="phone">
              <el-input v-model="params.phone" placeholder="请输入账号" maxlength="20">
                <template #prepend>
                  <img class="input-icon" src="@/assets/img/username.png" alt="">
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="verifyCode">
              <el-input v-model="params.verifyCode" placeholder="请输入验证码" maxlength="6">
                <template #prepend>
                  <img class="input-icon" src="@/assets/img/password.png" alt="">
                </template>
                <template #append>
                  <el-button size="small" @click="toSendCode" :disabled="isSending" class="get-send-code">{{codeText}}</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-button :class="{'disabled': disabled, 'submit': true}" :disabled="disabled" @click="singin" v-loading="loading">登 录</el-button>
        </div>
      </div>
      <div class="footer">copyright © 2018 车主邦（北京）科技有限公司出品</div>
    </div>
  </div>
</template>

<script lang="ts">
import { sendVerifyCode, login } from '@/api/login'
import { defineComponent, reactive, ref, computed, getCurrentInstance } from 'vue'
import { nonceStr } from '@/utils/common'
import store from '@/store'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    let params = reactive({})
    let formRules = reactive({
      phone: { required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的11位手机号', trigger: 'change' },
      verifyCode: { required: true, message: '请输入验证码', trigger: 'change' }
    })
    let disabled = computed(() => {
      const { phone, verifyCode } = params
      return !(phone && verifyCode && verifyCode.length >= 4)
    })
    let loading = ref(false)
    let isSending = ref(false)
    let codeText = ref('获取验证码')
    const toSendCode = async () => {
      proxy.$refs.form.validateField('phone', async err => {
        if (!err) {
          const { phone } = params
          const { code } = await sendVerifyCode({ phone, sourceType: 6 })
          if (code !== 200) return
          setCountText()
          proxy.$message.success('验证码发送成功。')
        }
      })
    }
    // 设置验证码框的状态
    const setCountText = () => {
      codeText.value = '60s后重新发送'
      isSending.value = true
      let count = 60
      let timer = setInterval(() => {
        codeText.value = `${count}s后重新发送`
        if (count === 0) {
          clearInterval(timer)
          isSending.value = false
          codeText.value = '获取验证码'
        } else {
          count--
          codeText.value = `${count}s后重新发送`
        }
      }, 1000)
    }
    const singin = async () => {
      try {
        loading.value = true
        const res = await login({ ...params, nonceStr: nonceStr(), timestamp: Date.now() })
        const { Authorization, owner, userType, code } = res
        if (code !== 200) return
        localStorage.setItem('Authorization', Authorization)
        localStorage.setItem('owner', JSON.stringify(owner))
        localStorage.setItem('userType', userType)
        let newRoutes: Array<object> = await store.dispatch('setDynamicRoutes')
        proxy.$message.success('登录成功')
        setTimeout(() => {
          window.location = newRoutes[0].children[0].path
        }, 500)
      } finally {
        loading.value = false
      }
    }
    return { params, formRules, disabled, loading, isSending, codeText, toSendCode, singin }
  }
})

</script>

<style scoped lang="less">
  .login-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .header {
      height: 80px;
      line-height: 80px;
      img {
        width: 246px;
        height: 24px;
        margin-left: 120px;
      }
    }
    .container {
      flex: 1;
      background: url(https://web.czb365.com/ty/czb-mosi-wms-web/login-bg.png);
      background-size: 100% 100%;
      margin: -10px;
      position: relative;
      .login-box {
        width: 790px;
        height: 448px;
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        transform: translate(-50%, -50%);
        & > div {
          width: 50%;
          height: 100%;
        }
        .login-box-left {
          background-image: url('https://web.czb365.com/ty/czb-mosi-wms-web/login-left-bg.png');
          background-size: cover;
        }
        .login-box-right {
          background: #ffffff;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          padding: 60px 49px 0 49px;
          box-sizing: border-box;
          .get-send-code {
            margin: 0;
            padding: 0;
            width: 100px;
            font-weight: 400;
          }
          .title {
            font-size: 24px;
            color: rgba(51, 51, 51, 1);
            margin: 20px 0;
          }
          .input-icon {
            height: 20px;
          }
          &:deep(.el-input-group__prepend) {
            background-color: #fff;
            padding: 0 13px;
          }
          &:deep(.el-input-group__append) {
            background-color: #fff;
            padding: 0;
            img {
              margin-top: 3px;
              height: 31px;
            }
          }
          .submit {
            width: 100%;
            margin-top: 20px;
            background: rgba(0, 82, 255, 1);
            box-shadow: 0px 2px 7px 0px rgba(122, 149, 207, 1);
            border-radius: 4px;
            border: none;
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            &:hover {
              background-color: #0847CC;
            }
          }
          .disabled, .disabled:hover {
            background-color: #a0cfff;
          }
        }
      }
      .footer {
        height: 40px;
        line-height: 32px;
        background: linear-gradient(211deg, #313E61 0%, #41659A 100%);
        opacity: 0.41;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }
</style>
